<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 即时通讯集成</el-breadcrumb-item>
                <el-breadcrumb-item>推送接口设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row>
                <el-col :span="1">
                    <el-button type="primary" @click="openNew">新建</el-button>
                </el-col>
                <el-col :span="3" :offset="10">
                    <span>通讯接口描述：</span>
                </el-col>
                <el-col :span="2">
                    <el-input v-model="searchKey"></el-input>
                </el-col>
                <el-col :span="1" class="ml10">
                    <el-button @click="handleFind">查找</el-button>
                </el-col>
                <a :href="exportUrl" class="r exportLink"  target="_blank" :style="{background:maincolor||'#5a6775'}">导出</a>
            </el-row>
            <el-table
                ref="multipleTable"
                :data="imList"
                border
                v-loading="loading"
                style="width: 100%; margin-top:20px">
                <el-table-column
                    type="index"
                    label="序号"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="inteDesc"
                    label="通讯接口描述">
                </el-table-column>
                <el-table-column
                    prop="ipInfo"
                    label="IP地址">
                </el-table-column>
                <el-table-column
                    prop="userName"
                    label="用户">
                </el-table-column>
                <!-- <el-table-column
                    prop="port"
                    label="端口">
                </el-table-column>
                <el-table-column
                    prop="webService"
                    label="Webservice">
                </el-table-column> -->
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <a @click="handleOprate(scope.row)" class="mr15">{{scope.row.openFlag?'关闭':'开启'}}</a>
                        <a @click="handleEdit(scope.row)" type="text" class="mr15">编辑</a>
                        <a @click="handleDelete(scope.row)">删除</a>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page_container">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="threadNum"
                    layout="total, prev, pager, next, jumper"
                    :total="totalNum">
                </el-pagination>
            </div>
        </div>
        <div>
            <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="40%"
            >
                <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>通讯接口描述：</span></el-col>
                    <el-col :span="15">
                        <el-input v-model="inteDesc"></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>IP地址：</span></el-col>
                    <el-col :span="15">
                        <el-input v-model="ipInfo"></el-input>
                    </el-col>
                </el-row>
                <!-- <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>端口：</span></el-col>
                    <el-col :span="15">
                        <el-input v-model="port"></el-input>
                    </el-col>
                </el-row> -->
                <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>用户名：</span></el-col>
                    <el-col :span="15">
                        <el-input v-model="userName"></el-input>
                    </el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>密码：</span></el-col>
                    <el-col :span="15">
                        <el-input type="password" v-model="userPwd"></el-input>
                    </el-col>
                </el-row>
                <!-- <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>Webservice：</span></el-col>
                    <el-col :span="15">
                        <el-input v-model="webService"></el-input>
                    </el-col>
                </el-row> -->
                <el-row class="mt20">
                    <el-col :span="6"><span><span class="red">*</span>状态：</span></el-col>
                    <el-col :span="15">
                        <el-select v-model="openFlag" placeholder="请选择" clearable>
                            <el-option
                                v-for="item in openFlagValue"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <!-- <el-row class="mt20">
                    <el-col :span="6"><span>USER_ID映射通讯帐号程序包：</span></el-col>
                    <el-col :span="15">
                        <el-input v-model="userIdParse"></el-input>
                    </el-col>
                </el-row> -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleCreate" :loading="btnloading">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { mapState } from "vuex";
import utils from '../../utils/index.js'
export default {
    data() {
        return {
            loading: false,
            currentPage:1,
            openFlagValue:[{
                value: "false",
                label: "关闭"
            },{
                value: "true",
                label: "开启"
            }],
            searchKey:"",
            rowId:"",
            dialogTitle:"新建通讯接口",
            //新建参数
            inteDesc:"",
            ipInfo:"",
            openFlag:false,
            //port:"",
            userName:"",
            userPwd:"",
            //webService:"",
            ftpValue:'1',
            dialogVisible: false,
            threadNum: parseInt(localStorage.getItem('pagesize')),
            exportUrl: "",
            btnloading: false,
            userIdParse:""
        }
    },
    mounted() {
        if(localStorage.getItem('pageType') == 0) {
            this.$router.push({ path:'/user' });
        }
        this.getImList();
        this.exportUrl = utils.apiUrl + '/export/dashboard?sessionId=' + localStorage.getItem('sessionId') + '&searchKey=' + this.searchKey;
    },
    computed: mapState({
        msg: state => state.im.msg,
        flag: state => state.im.flag,
        imList: state => state.im.imList,
        totalNum: state => state.im.totalNum,
        maincolor: state => state.system.colors,
    }),
    methods:{
        getColor() {
            this.$store.dispatch("getColor", {
                sessionId: localStorage.getItem('sessionId')
            })
        },
        handleCurrentChange(val) {
            getImList(val);
        },
        openNew() {
            this.dialogVisible = true;
            this.dialogTitle = "新建通讯接口";
            this.rowId = "";
            this.inteDesc = "";
            this.ipInfo = "";
            this.openFlag = "";
            //this.port = "";
            this.userName = "";
            this.userPwd = "";
            //this.webService = "";
            this.userPwd = "";
            this.userIdParse = "";
        },
        handleEdit(row) {
            this.dialogTitle = "编辑通讯接口"
            this.dialogVisible = true;
            this.rowId = row.rowId;
            this.inteDesc = row.inteDesc;
            this.ipInfo = row.ipInfo;
            this.userIdParse = row.userIdParse;
            this.openFlag = row.openFlag.toString();
            //this.port = row.port;
            this.userName = row.userName;
            this.userPwd = row.userPwd;
            //this.webService = row.webService;
            this.userPwd = "*****";
        },
        handleDelete(row) {
            this.$confirm('确定删除？','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$store.dispatch("deleteIm", {
                        rowId: row.rowId,
                        sessionId: localStorage.getItem('sessionId')
                    }).then(() => {
                        this.$message(this.msg);
                        this.getImList();
                    })
                }).catch(() => {
                    this.$message('已取消删除');
                })
        },
        handleOprate(row){
            if(row.openFlag == true) {
                this.$store.dispatch("updateImStatus",{
                    openFlag: false,
                    rowId: row.rowId,
                    sessionId: localStorage.getItem('sessionId')
                }).then(() => {
                    this.getImList();
                })
            }else{
                this.$store.dispatch("updateImStatus",{
                    openFlag: true,
                    rowId: row.rowId,
                    sessionId: localStorage.getItem('sessionId')
                }).then(() => {
                    this.getImList();
                })
            }
        },
        getImList(pageNo) {
            this.loading = true;
            this.$store.dispatch("getImList",{
                pageNo:pageNo || 1,
                pageSize: this.threadNum, 
                searchKey: this.searchKey,
                sessionId: localStorage.getItem("sessionId")
            }).then(() => {
                if(this.msg !== '成功') {
                    this.loading = false;
                    this.$message(this.msg)
                }else{
                    this.loading = false;
                }
            })
        },
        handleCreate() {
            let params = {
                inteDesc:this.inteDesc,
                ipInfo:this.ipInfo,
                openFlag:eval(this.openFlag),
                //port: this.port,
                userName: this.userName,
                userPwd: this.userPwd,
                userIdParse: this.userIdParse,
                //webService: this.webService,
                handleCreate: this.handleCreate,
                sessionId: localStorage.getItem("sessionId")
            }
            if(this.inteDesc == "") {
                this.$message("通讯接口描述不能为空");
            }else if(this.ipInfo == "") {
                this.$message("IP地址不能为空");
            }else if(this.userName == "") {
                this.$message("用户名不能为空");
            }else if(this.userPwd == "") {
                this.$message("密码不能为空");
            }else if(this.rowId == "") {
                this.btnloading = true;
                this.$store.dispatch("createImCom",params).then(() => {
                    if(this.flag == 0) {
                        this.btnloading = false;
                        this.$message(this.msg);
                        this.dialogVisible = false;
                        this.getImList();
                    }else{
                        this.btnloading = false;
                        this.$message(this.msg);
                    }
                })
            }else{
                if(this.userPwd == "*****") {
                    delete params.userPwd;
                    params.rowId = this.rowId;
                    this.btnloading = true;
                    this.$store.dispatch("updateImCom",params).then(() => {
                        if(this.flag == 0) {
                            this.btnloading = false;
                            this.dialogVisible = false;
                            this.$message(this.msg);
                            this.getImList();
                        }else{
                            this.btnloading = false;
                            this.$message(this.msg);
                        }
                    })
                }else{
                    this.btnloading = true;
                    params.rowId = this.rowId;
                    this.$store.dispatch("updateImCom",params).then(() => {
                        if(this.flag == 0) {
                            this.btnloading = false;
                            this.$message(this.msg);
                            this.dialogVisible = false;
                            this.getImList();
                        }else{
                            this.btnloading = false;
                            this.$message(this.msg);
                        }
                    })
                }
            }
        },
        handleFind() {
            this.getImList();
            this.exportUrl = utils.apiUrl + '/export/dashboard?sessionId=' + localStorage.getItem('sessionId') + '&searchKey=' + this.searchKey;
        }
    }
}
</script>
<style>
.el-button+.el-button{
    margin-left:0;
}
</style>


